<template>
  <!--维保单位组件-->

  <div class="maintenance">
    <span v-text="childName + ':'"></span>
    <!--输入后匹配输入建议-->
    <el-autocomplete class="inline-input unit-select" v-model="inputMsg"
                     :fetch-suggestions="getMainData" placeholder="请输入内容"
                     @select="handleSelect">
    </el-autocomplete>
  </div>
</template>
<script>

  import {queryOrgan} from '@/api/getData'

  export default {
    name: 'maintenance',
    data() {
      return {
        inputMsg: '',
        oldSearchString: ''
      }
    },
    props: ['childName', 'searchType'],
    created() {
    },
    methods: {
      handleSelect(item) {  // 选择之后的数据
        this.$emit('curName', item.code)
        // 传递选中信息
        this.$emit('transferSelect', item)
      },
      getMainData(queryString, cb) { // 获取维保单位数据的方法
        // 判断需要搜索的内容是否为空
        /*  if (!queryString) {
          // 为空时,传null
          this.$emit('curName', null)
          this.$emit('transferSelect', null)
          return cb([]);
        }*/
        const self = this
        // 每次点击查询前置空查询条件
        // 事实上应该是发生变化时置空查询条件
        if (this.oldSearchString !== queryString && queryString.length >= 1) {
          this.$emit('setStatus')
        }
        if (queryString === '') {
          this.$emit('setInputEmpty')
        }
        this.oldSearchString = queryString
        const param = {
          name: queryString,
        }
        // 当全部查询时
        if (self.searchType) {
          param.type = self.searchType
        }
        queryOrgan(param).then(function (data) {
          let organList = data.data.data;
          let organArrs = []
          organList.forEach(function (i) {
            i.value = i.name
            organArrs.push(i)
          });
          cb(organArrs);
        }).catch((data) => {
          this.$message.error(data.data.message)
        })
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  .maintenance {
    display: flex;
    width: 100%;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
      flex-shrink: 0;
    }
  }

  .unit-select {
    flex-grow: 1;
    .el-input {
      width: 100% !important;
      input {
        width: 100% !important;
      }
    }
  }
</style>
